<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">类目型定向-高级兴趣点</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="近期对某些购物兴趣点有意向的人群。兴趣点定向的升级版。">近期对某些购物兴趣点有意向的人群。兴趣点定向的升级版。</span>
      <el-button @click.native="categoryShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="类目型定向-高级兴趣点"
          :visible.sync="categoryDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="searchBox">
              <input class="input w430" placeholder="这里可以输入兴趣点的关键词进行搜索，如：连衣裙" v-model="Tip">
              <el-button type="primary" size="small" @click="searchIndustry">搜索</el-button>
            </div>
            <div class="key-result clearfix">
              <div class="key-result-box">
                <div class="key-result-header clearfix">
                  <span class="fl color-grey">标签</span>
                  <span class="fl color-grey">所属类目</span>
                  <span class="fr color-blue" @click="addAll">全部添加</span>
                </div>
                <div class="bb-e6 clearfix">
                  <div class="fl color-grey lh32">标签筛选：</div>
                  <div id="dropdown_cats" class="dropdown fl w280">
                    <span class="dropdown-hd ellipsis w280" @click="AllClass">
                        <span class="dropdown-text">{{className}}</span>
                        <i class="icon-arrow-down el-icon-arrow-down"></i>
                    </span>
                    <ul class="dropdown-list w280" v-show="classflag">
                      <li class="dropdown-item" :class="limit==-1 ? 'dropdown-itemselected' : ''" @click="getAllClass">
                        <span>全部类目</span>
                      </li>
                      <li class="dropdown-item" :class="limit==val.cat_id ? 'dropdown-itemselected' : ''" v-for="(val,index) in classList" @click="getClass(index,val)">
                        <span>{{val.cat_name}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <ul class="key-hover-items">
                  <li class="clearfix key-hover-item" v-for="(label,index) in labels" :class="isTrue(label.status)" v-show="limit==-1||limit==label.cat_id">
                    <div class="hover-td">
                      <div class="hover-ellipsis">{{label.option_name}}</div>
                    </div>
                    <div class="hover-td">
                      <div class="hover-ellipsis">{{label.cat_name}}</div>
                    </div>
                    <div class="hover-td cp" @click="add(index)" v-show="!label.status">添加</div>
                  </li>
                </ul>
              </div>
              <div class="key-result-gap">
                <i class="el-icon-d-arrow-right" style="font-size:20px;"></i>
              </div>
              <div class="key-result-box">
                <div class="key-result-header clearfix">
                  <span class="fl color-grey">已选标签</span>
                  <span class="fl color-grey">所属类目</span>
                  <span class="fr color-blue" @click="removeAll">全部移除</span>
                </div>
                <ul class="key-hover-items">
                  <li class="clearfix" v-for="(item,i) in selectedLabels">
                    <div class="hover-td">
                      <div class="hover-ellipsis">{{item.option_name}}</div>
                    </div>
                    <div class="hover-td">
                      <div class="hover-ellipsis">{{item.cat_name}}</div>
                    </div>
                    <div class="hover-td cp color-grey" @click="remove(i)">移除</div>
                  </li>
                </ul>
                <div class="key-result-bottom">
                  <span class="color-grey">已选个数{{selectedLabels.length}}/50</span>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning3.flag">
              <i class="el-icon-warning"></i>
              {{warning3.text}}
            </a>
            <el-button @click="categoryDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="categoryConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style src="./style.styl" scoped lang="stylus"></style>
<style scoped lang="stylus">
  .w430
    width: 430px;

  .key-result-header
    span
      width: 130px;
      margin-right: 10px;
      text-align: center;
      &:last-child
        width: 60px;

  .bb-e6
    border-bottom: 1px solid #e6e6e6;
    padding: 5px 10px;
    .lh32
      line-height: 32px;
      width: 100px;
    .dropdown
      position: relative;
      display: inline-block;
      height: 32px;
      line-height: 30px;
      border: 0;
      outline: 0;
      .dropdown-hd
        display: block;
        height: 32px;
        min-width: 100px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        color: #999;
        text-align: left;
        background-color: #fff;
        background-image: none;
        cursor: pointer;
        transition: color .15s ease-out,border-color .15s ease-out;
        padding-right: 20px;
        padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .icon-arrow-down
          float: right;
          margin-left: 10px;
          margin-top: 2px;
          font-size: 8px;
          position: absolute;
          right: 8px;
          top: 8px;
          height: 8px;
          color: #999;
      .dropdown-list
        max-height: 260px;
        overflow-y: scroll;
        position: absolute;
        min-width: 100px;
        margin-top: 10px;
        padding: 10px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        top: 32px;
        left: 0;
        overflow: auto;
        text-align: left;
        list-style: none;
        box-shadow: none;
        font-size: 12px;
        background: #fff;
        .dropdown-item
          margin: 3px 0;
          padding: 2px 0;
          white-space: nowrap;
          cursor: pointer;
          border-radius: 4px;
          height: auto;
          transition: background-color .15s ease-out;
          overflow: hidden;
          line-height: 25px;
          text-indent: 8px;
          color: #333;
          position: relative;
          &:hover
            background-color: #fafafa;
          &.dropdown-itemselected
            background-color: #4d7fff;
            color: #fff;

  .key-hover-items
    height: 296px;
    overflow: auto;
    li
      padding: 4px 10px;
      .hover-td
        display: table-cell;
        vertical-align: middle;
        padding-right: 10px;
        &.cp
          cursor: pointer;
          text-align: right;
          width: 140px;
        .hover-ellipsis
          line-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 130px;
          padding-right: 10px;
      &.key-hover-item:hover
        background: #fafafa;
        .hover-ellipsis
          white-space: inherit;
</style>
<script>
  export default {
    props:{
      categoryMsg:Array
    },
    data() {
      return {
        categoryDialog: false,
        Tip: '',
        warning3: {
          text: '请至少选择一个定向标签',
          flag: false
        },
        classflag: false,
        className:'全部类目',
        limit:-1,
        classList:[],//存筛选出来不重复的类目
        labels: [],
        selectedLabels: [],
        categoryList: [],
      }
    },
    created() {
      this._getTip();
    },
    methods: {
      categoryShowModal() {//设置类目型定向
        this.categoryList = this.categoryMsg;
        this.$http.get('/zuanzhan/crowd/cat').then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
            this.chooseClass();//筛选labels里不重复的类目
            this.Tip = '';//关键词清空
            this.selectedLabels.forEach((item, index) => {//labels里status置为1
              this.$set(item,'status',0);
            });
            this.selectedLabels=[];//谈开弹窗前恢复所有状态为未选中，弹窗右侧清空
            this.categoryList.forEach((items,index)=>{//把categoryList的数据赋值给selectedLabels
              let findIndex = this.labels.findIndex(item=>item.option_value === items.option_value);
              if(findIndex != -1){
                this.$set(this.labels[findIndex],'status',1);
                this.selectedLabels.push(this.labels[findIndex]);
              }else{
                this.selectedLabels.push(items);
              }
            })
            this.categoryDialog = true;
            this.warning3.flag = false;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      _getTip() {//加载标签
        this.$http.get('/zuanzhan/crowd/cat').then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
            this.chooseClass();//筛选labels里不重复的类目
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      searchIndustry() {//搜索行业店铺标签
        if (this.Tip != '') {
//          console.log(this.Tip)
          this.$http.get('/zuanzhan/crowd/cat', {
            params: {
              interest_name: this.Tip
            }
          }).then((res) => {
//            console.log(res.data);
            if (res.data.code == 200) {
              let data = res.data;
              this.labels = data.data;
              this.chooseClass();
              //console.log(this.labels);
//              遍历看看有没有右边的数据，若有，变灰
              this.labels.forEach((items,index)=>{
                let findIndex = this.selectedLabels.findIndex(item=>item.option_value === items.option_value);
                if(findIndex != -1){
                  this.$set(items,'status',1);
                }
              })
            }
          }).catch((error) => {
            console.log(error);
          });
        }
      },
      chooseClass(){//筛选labels里不重复的类目
        var hash = {};
        this.classList = this.labels.reduce(function(item, next) {
          hash[next.cat_id] ? '' : hash[next.cat_id] = true && item.push(next);
          return item
        }, [])
//        this.labels.forEach((items,index)=>{//另一种方法
//          let findIndex = this.classList.findIndex(item => item.cat_id === items.cat_id);
//          if(findIndex == -1){
//            this.classList.push(items);
//          }
//        })
//        console.log(this.classList)
      },
      AllClass(){//点击展开/收起全部类目
        this.classflag = this.classflag ? false : true;
      },
      getAllClass(){//点击全部类目
        this.limit=-1;
        this.className = '全部类目';
        this.classflag = false;
      },
      getClass(index,item){//点击某一个类目
        this.limit=item.cat_id;
        this.className = item.cat_name;
        this.classflag = false;
      },
      isTrue(status) {//根据status判断添加按钮前面那行字体的颜色
        return status ?  'color-c':''
      },
      add(index) {//添加行业店铺定向标签
        if(this.selectedLabels.length <= 49){
          this.$set(this.labels[index],'status',1);
          this.selectedLabels.push(this.labels[index]);
          if (this.warning3.flag) this.warning3.flag = false;
        }else{
          this.warning3.text = '不能多于50个标签';
          this.warning3.flag = true;
        }
      },
      addAll() {//添加全部
        if(this.labels.length+this.selectedLabels.length <= 50){
          if (this.warning3.flag) this.warning3.flag = false;
          this.labels.forEach((item, index) => {
            this.$set(item,'status',1);
          })
          this.selectedLabels = this.labels;
        }else{
          this.warning3.text = '不能多于50个标签';
          this.warning3.flag = true;
        }
      },
      remove(index) {//移除行业店铺定向标签
        this.selectedLabels[index].status = 0;
        this.selectedLabels.splice(index, 1);
      },
      removeAll() {//移除全部
        this.selectedLabels.forEach((item, index) => {
          item.status = 0;
        })
        this.selectedLabels = [];
      },
      categoryConfirm() {//行业店铺定向的确认
        if (!this.selectedLabels.length) {
          this.warning3.text = '请至少选择一个定向标签';
          this.warning3.flag = true;
        } else {
          this.warning3.flag = false;
          this.categoryList = JSON.parse(JSON.stringify(this.selectedLabels));
          this.categoryList.forEach((item,index)=>{
            item.matrix_price = {};
          });
          this.$emit("categoryData",this.categoryList);//传给父组件
          this.categoryDialog = false;
        }
      }
    }
  }
</script>

